<template>
    <span>
      <!-- 工伤联网结算 -->
    <div class="settlement-box" @click="isShow = true">
      <div class="subtitle-long">工伤联网结算</div>
      <dv-scroll-board :config="chartConfig" class="settlement-tableSize"/>
    </div>
      <!--  弹框  -->
      <el-dialog
        :modal="false"
        :show-close="false"
        :visible.sync="isShow"
        width="1250px"
        customClass="dialogBox">
        <dv-decoration-3 v-for="(itemSty,index) in dv3Sty" :key="index" :style="itemSty" class="dv3"/>
        <dv-border-box-11 title="工伤联网结算" class="dv11">
          <div class="settlement-basket">
            <dv-scroll-board :config="chartConfig_dialog" class="fullSize"/>
          </div>
        </dv-border-box-11>
      </el-dialog>
    </span>

</template>

<script>
export default {
  name: "table_settlement",
  data() {
    return {
      // 弹框显示标记
      isShow: false,
      // 轮播表配置
      chartConfig: {
        header: ['姓名 ', '医院', '时间'],
        data: [
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
          ['诸葛村夫', '浙江大学附属人民第一医院', '2022.12.15'],
        ],
        index: false,
        indexHeader: '序号',
        columnWidth: [80, 200, 100],
        rowNum: 3,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      // 轮播表配置(弹框)
      chartConfig_dialog: {
        header: ['#', '姓名', '身份证', '统筹区', '医院', '时间', '金额'],
        headerHeight: 40,
        data: [],
        index: false,
        indexHeader: '#',
        columnWidth: [80, 120, 280, 120, 320, 150, 100],
        rowNum: 10,
        align: ['left'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A',
        hoverPause: false
      },
      // 弹框边框装饰条样式
      dv3Sty: ['left: -5px', 'left: 250px', 'right: 5px', 'right: 250px']
    }
  },
  mounted() {
    this.carousel()
  },
  methods: {
    // 初始化弹框轮播表样式
    carousel() {
      //初始化列表数据
      let temp = [];
      for (let i = 0; i < 20; i++) {
        temp[temp.length] = [i + 1, '诸葛村夫', '332526196903208119', '330799', '浙江大学金华附属人民医院', '2022.01.02', '5600元'];
      }
      this.chartConfig_dialog.data = temp;
      // 初始化表头样式
      let tempHeader = this.chartConfig_dialog.header;
      for (let index in tempHeader) {
        tempHeader[index] = '<span style="font-size: 24px;">' + tempHeader[index] + '</span>';
      }
      // 初始化列表体样式
      let tempArray = this.chartConfig_dialog.data;
      for (let index in tempArray) {
        for (let sunIndex in tempArray[index]) {
          tempArray[index][sunIndex] = '<span style="font-size: 22px;line-height: 50px">' + tempArray[index][sunIndex] + '</span>';
        }
      }
    },
  }
}
</script>

<style scoped>
.settlement-box {
  float: left;
  width: 50%;
  height: 100%;
}

.settlement-tableSize {
  margin-left: 5.5%;
  width: 94.5%;
  height: 70%;
}

.settlement-basket {
  width: 1240px;
  height: 500px;
  position: absolute;
  top: 55px;
  left: 10px;
  z-index: 1;
}

.dv3 {
  float: left;
  width: 250px;
  height: 30px;
  position: absolute;
  z-index: 2;
  top: 0px;
}

.dv11 {
  width: 1260px;
  height: 580px;
  margin-left: -25px;
  margin-top: -60px
}
</style>

<style>
.dialogBox {
  height: 580px;
  background-image: url("../assets/bg07.jpg");
}
</style>
